<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title><?=$this->page_title?></title>
    <link rel="stylesheet" type="text/css" href="/style/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/style/css/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="/style/css/xshop.css?ver=20170916" />
    <script src="/style/js/jquery-1.12.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/style/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/style/js/xShop.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="/style/css/custome.css"/>
    <script type="text/javascript" src="/style/js/sweet-alert.min.js"></script>
    <link type="text/css" rel="stylesheet" href="/style/css/sweet-alert.css">
    <script src="/style/js/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
    <script src="/style/js/hammer.js" type="text/javascript" charset="utf-8"></script>
    <script src="/style/js/jquery.photoClip.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.popclip {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 100000;
    background: #000;
    text-align: center;
    display: none;
}

.popclip #clipArea {
    width: 100%;
    height: 100%;
}

.popclip .clipBtn {
    position: fixed;
    bottom: 10px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
}

.popclip .clipBtn a {
    color: #fff;
    font-size: .3rem;
}

.popclip .clipBtn a.left {
    float: left;
    margin-left: 10px;
}

.popclip .clipBtn a.right {
    float: right;
    margin-right: 10px;
}
.none{display: none;}
.avatar{width:100%; height: auto; text-align: center; margin-top: 1rem;}
.avatar img{width:3rem; height:3rem; border-radius: 3rem; border:1px solid #ccc;}
.avatar p{margin-top: .3rem; font-size: .3rem;}
</style>

  </head>
<body>
<div class="outwrap">
	<!--top-->	
	<div class="topbar clearfix topvh">
<!--        <a href="javascript:history.go(-1);" class="btn-back">-->
		<a href="/mystore/account_manage" class="btn-back">
			<i class="ico-back"></i><span>修改头像</span>
		</a>
	</div>
   <div class="meinner-adr-add">
    
    <div class="avatar">      
      <?php if($this->user['headimgurl']>0) { ?>
        <img src="<?=$this->docs[$this->user['headimgurl']]?>">
      <?php } else { ?> 
        <img src="/style/images/img25.jpg">
      <?php  } ?>
      <p>点击头像选择新头像</p>
    </div>

    <div class="btnwrap">
      <input type="button" class="btn-mexl btn-bc" value="保存头像" />
    </div>
  </div>
</div>

<div class="popclip popclip_pic">    
    <div id="clipArea"></div>
    <div class="clipBtn">
    <a href="javascript:_clipcancel();" class="left">取消</a>
    <a href="javascript:;" id="confirmUse" class="right">确定使用</a>
    </div>
</div>
<div class="none"><input type="file" id="_picup"  /></div>

<script type="text/javascript">
var _new_headimgurl = '';
$(document).ready(function(e){

    $(".btn-bc").click(function(){
    _save();
  });

    // 绑定上传按钮点击
    $(".avatar img").bind("click",function(){

        $("#_picup").click();

    });

    $("#clipArea").photoClip({
        width: $(window).width(),
        height: $(window).width(),
        file: "#_picup",
        ok: "#confirmUse",
        loadStart: function () {            
            console.log("照片读取中");
        },
        loadComplete: function () {
            $(".popclip").css("display","block");
            console.log("照片读取完成");
        },
        clipFinish: function (dataURL) {
            $(".popclip").css("display","none");
            _resizeImg(dataURL);
        }
    });

});

function _resizeImg(imgData)
{
    var img = new Image,
        width = 400, //image resize
        quality = 0.8, //image quality
        canvas = document.createElement("canvas"),
        drawer = canvas.getContext("2d");
    img.src = imgData;
    img.onload = function() {
        if(img.width>width)
        {
            canvas.width = width;
            canvas.height = width * (img.height / img.width);
        }
        else
        {
            canvas.width = img.width;
            canvas.height = img.height;
        }
        drawer.drawImage(img, 0, 0, canvas.width, canvas.height);
        var img_data = canvas.toDataURL("image/jpeg", quality);
        _new_headimgurl = img_data;
        $(".avatar img").prop("src",img_data);
    }
}

function _clipcancel()
{
    $(".popclip").css("display","none");
}

function _save()
{
  if(_new_headimgurl!="")
  {
    $.post("/mystore/ajax",{
            "act":"change_headimg",            
            "headimg":_new_headimgurl,
            "mr":Math.random()
        },function(json){            
            console.log(json);
            if(json.code==200)
            {
                swal("保存头像成功",false,"success");
                setTimeout(function(){
                    window.location.href = '/mystore/account_manage';
                },2100);
            }
            else swal("保存头像失败","错误代码：["+json.code+"]","error");

        },"json");

  }
  else
  {
    swal("请选择照片");
  }
}
</script>

<!--底部导航-->
	<div class="foot-menu">
		<ul class="clearfix">
        <li><a href="/index/index"><i class="ico-1"></i><span>首页</span></a></li>
        
        <li><a href="/cart/cart"><i class="ico-5"></i><span>购物车</span></a></li>
        <li><a href="#"><i class="ico-3"></i><span>客服</span></a></li>
        <li class="on"><a href="/user/index"><i class="ico-4"></i><span>我的</span></a></li>
		</ul>
	</div>
</body>
</html>
